<template>
    <div class="info">

        <navbar :screenWidth="screenWidth"></navbar>
        <template v-if="screenWidth>576">
            <!-- <div class="banner" v-if="infodata.images">
                <img class="imgwh" :src="link+infodata.images" alt="">
            </div> -->
            <div style="width:100vw;height:6.25rem;background:#FFFBF0;"></div>
        </template>
      
          <div class="content-nav">
            <div class="top-left-icon" v-if="screenWidth>576"></div>
            <div class="bottom-right-icon" v-if="screenWidth>576"></div>
      
            <div class="text">
              <div class="acea-row row-between fs-14 cursor" @click.stop="backpage" v-if="screenWidth>576">
                <div>所在位置：{{ meunitem.name }} ＞ {{ childitem.name }}</div>
                <div class="" ><<返回</div>
              </div>
              <div class="acea-row row-middle row-center mt-30">
                <div class="bianti-icon" v-if="screenWidth>576">
                  <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/bianti-left.png" alt="">
                </div>
                <div class="title">{{ infodata.name }}</div>
                <div class="bianti-icon" v-if="screenWidth>576">
                  <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/biaoti-right.png" alt="">
                </div>
              </div>
            </div>
            
            <div class="parser">
                <div v-html="infodata.content"></div>
                <div class="" v-for="(item,index) in files" :key="index">
                    <span>附件：</span>
                    <a :href="link+item.link" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
                </div>
            </div>
        </div>

        <footers :screenWidth="screenWidth" @stopTop="scrollToTop"></footers>

    </div>
</template>
<script>
    import navbar from '@/components/navbar.vue';
    import footers from '@/components/footers.vue';
    export default{
        name:'InfoView',
        components:{
            navbar,
            footers
        },
        data(){
            return {
                screenWidth:'1920',
                childitem:[],
                meunitem:[],
                categroyType:'',
                showType:'',
                link:localStorage.getItem('link'),
                infodata:null,
                files:[],

            }
        },
        watch: {
            // 监听路由对象中的变化
            '$route': {
                handler: function (to, from) {
                    // 路由发生变化时触发的操作
                    console.log('Route changed from', from.path, 'to', to.path);
                    this.scrollToTop();
                    this.meunitem = JSON.parse(localStorage.getItem('meunitem'))
                    this.childitem = JSON.parse(localStorage.getItem('childitem'))
                    console.log(this.childitem);

                    this.handleResize();
                    window.addEventListener('resize', this.handleResize);
                    let type = this.$route.query.type;
                    if( type == 3 ){
                        this.detail();
                    }else{
                        this.getinfo();
                    }
                },
                // 设置为深度监听
                deep: true
            }
        },
        mounted(){
            this.scrollToTop();
            this.meunitem = JSON.parse(localStorage.getItem('meunitem'))
            this.childitem = JSON.parse(localStorage.getItem('childitem'))
            this.handleResize();
            window.addEventListener('resize', this.handleResize);
            let type = this.$route.query.type;
            if( type == 3 ){
                this.detail();
            }else{
                this.getinfo();
            }
        },
        methods:{
            detail(){
                let that = this;
                that._get('/api/portal/web/dynamicArticle/detail',{
                    id: that.$route.query.id
                }).then(res=>{
                    that.infodata = res.data.data;
                    let files = res.data.data.files;
                    let array = {
                        link:'',
                        name:''
                    }
                    let srt = [] , arr=[];
                    if(files =='' || files == null ){
                        return ;
                    }else{
                        arr = files.includes(',') ? files.split(",") : files;
                        srt.push(arr)
                        srt.forEach(item=>{
                            if( item.lastIndexOf("/")>-1 ){
                                array.link = item;
                                array.name = item.slice(item.lastIndexOf("/")+1);
                                that.files.push(array)
                            }
                        })
                    }
                })
            },
            getinfo(){
                let that = this;
                that._get('/api/portal/web/article/detail',{
                    id: that.$route.query.id
                }).then(res=>{
                    that.infodata = res.data.data;
                    let files = res.data.data.files;
                    let array = {
                        link:'',
                        name:''
                    }
                    let srt = [] , arr=[];
                    if( files !='' || files != null ){
                        arr = files.includes(',') ? files.split(",") : files;
                        srt.push(arr)
                        srt.forEach(item=>{
                            if( item.lastIndexOf("/")>-1 ){
                                array.link = item;
                                array.name = item.slice(item.lastIndexOf("/")+1);
                                that.files.push(array)
                            }
                        })
                    }
                })
            },
            scrollToTop() {
                window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
                });
            },
            handleResize() {
                this.screenWidth = window.innerWidth;
            },
            backpage(){
                this.$router.back();
            },
        }
    }
</script>
<style lang="scss" scoped>
    body{ background-color: #FFFBF0 !important; }
    ::v-deep img{
        width:100%;
        height: auto;
    }
  
    .info{

        .banner{
            width: 100vw;
            height: 47.25rem;
        }

        .content-nav{
            width: 100vw;
            //min-height: 62.5rem;
            background-color: #FFFBF0;
            position: relative;
            overflow: hidden;

            .top-left-icon{
                width: 18.75rem;
                height: 18.75rem;
                background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/wenhuatopleft.png");
                background-size: 100% 100%;
                position: absolute;
                top: 1.25rem;
                left: -1.25rem;
            }
            .bottom-right-icon{
                width: 30rem;
                height: 30rem;
                background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/huawenbottomright.png");
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                right: -6.25rem;
            }
            
            .text{
                width: 65%;
                margin: 1.875rem auto;

                .title{
                    color: #1E5A54;
                    font-size: 1.625rem;
                    font-weight: bold;
                    margin: 0 .625rem;
                }
                .bianti-icon{
                    width: 5.4375rem;
                    height: 2.75rem;
                }

            }
        }

        .parser{
            width: 65%;
            min-height: 50rem;
            margin: 1.875rem auto;
            text-align: center;

            .par >>> img{
                width: 21.5625rem;
                height: auto;
            }
        }


        @media screen and (max-width: 36rem) {

            .content-nav{
                margin-top: 6.25rem;

                .text{
                    width: 90%;


                }

            }

            .parser{
                width: 90%;
            }


        }

        
    }

</style>